<template>
    <div class="tabs">
        <el-tag v-for="(item,index) in tags" size="small" :key="item.name" :closable="item.name !== 'home'" :effect="$route.name === item.name ? 'dark' : 'plain'"
        @click.native="changeMenu(item)" @close="handleClose(item,index)">{{ item.label }}</el-tag>
    </div>
</template>

<style lang="less" scoped>
.tabs{
    padding: 20px;
    /deep/.el-tag{
        margin-right: 15px;
        cursor: pointer;
        &:last-child{
            margin-right: 0;
        }
    }
}
</style>
<script>
import { mapState, mapMutations } from 'vuex';
// mapState 以及 mapMutations 都是将vuex中的模块遍历出来
export default {
    name: 'CommonTag',
    data(){
        return {

        }
    },
    computed: {
        ...mapState({
            tags: state => state.tab.tabsList
        })
    },
    methods:{
        ...mapMutations({
            close: 'closeTag'  // 类似与在页面中重定义一个方法调用 vuex中的方法
        }),
        changeMenu(item){
            this.$router.push({
                name: item.name
            })
            this.$store.commit('isDefaultActive',item)
        },
        handleClose(item,index){
            const length = this.tags.length - 1
            this.close(item);
            // this.$route  查看当前路由
            // this.$router  访问路由器
            if(item.name !== this.$route.name){
                return
            }
            if(length === index){
                this.$router.push({
                    name: this.tags[index - 1].name 
                })
            }else{
                this.$router.push({
                    name: this.tags[index].name 
                })
            }
            // this.$store.commit('closeTag',item) // 同上 都是通过调用 vuex中的方法，进行数据的修改
        }
    }
}

</script>